<template>
    <div class="button">
      <div @click="changeEve(it)" v-for="it in footerList" :key="it.name" :class="['down', it.judge ? 'judge' : '']">
        <i :class="[it.icon]"></i>
        <span>{{ it.name }}</span>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      footerList: [
        { icon: "home", name: "首页", route: "/home" ,judge:false},
        { icon: "classify",name: "分类",route: "/classify",judge:false},
        { icon: "shoppingcart",name: "购物车",route: "/shoppingcart",judge:false},
        { icon: "mine", name: "我的", route: "/mine",judge:false },
      ],
    }
  },
watch:{
  '$route.path':{
    immediate: true,
    handler(_route){
       this.footerList = this.footerList.map(it => {
          it.judge = it.route ===_route
          return it
        })
    }

  }
},
  methods: {
    changeEve(it) {
     
      this.$router.push(it.route);
    },
  },
};
</script>
<style lang="less" scoped>
@icons: home classify classify shoppingcart mine;
.loop(@index: 1) when (@index <= length(@icons)) {
        @icon: extract(@icons, @index);
         i {
            &.@{icon} {
                background-image: url("../../images/@{icon}.png");
            }
        }
        &.judge {
             i {
                &.@{icon} {
                    background-image: url("../../images/@{icon}2.png");
                }
            }
        }
        .loop(@index + 1);
    }
   .button {
    display: flex;
    justify-content: space-between;
    height: 50px;
    border-top: solid 1px #eeeeee;
    background: #fff;
     .down {
      padding: 0 20px;
       i {
        display: block;
        height: 32px;
        background-position: center bottom;
        background-size: 22px;
        background-repeat: no-repeat;
      }
       span {
        display: block;
        height: 16px;
        text-align: center;
        font-size: 0.6rem;
        color: #545456;
      }

      .loop();
      &.judge {
         span {
          color: #b42239;
        }
      }
    }

  }
</style>